<template>
	<div>
		<cl-dialog
			title="视频教程"
			width="60%"
			:visible.sync="visible"
			@close="close"
			:props="{
				appendToBody: true,
				closeOnClickModal: false,
				closeOnPressEscape: false
			}"
		>
			<div class="flex h-100" style="overflow: hidden">
				<cl-flex1>
					<video ref="videoRef" class="h-100 w-100" :src="videoSrc" controls />
				</cl-flex1>
				<div class="video-list ml-2">
					<el-collapse
						v-model="activeNames"
						v-for="(item, index) in videoData"
						:key="index"
						@change="changeTab(index)"
					>
						<el-collapse-item :name="index">
							<template #title>
								<div class="title d-flex">
									<div class="line"></div>
									<span class="ml-1">{{ item.title }}</span>
								</div>
							</template>
							<template v-if="videoList[index].length">
								<div
									:class="
										currentId == video.id
											? 'sec-tit ellipsis active'
											: 'sec-tit ellipsis'
									"
									v-for="(video, idx) in videoList[index]"
									:key="idx"
									@click="changeVideo(video)"
								>
									{{ idx + 1 }}、{{ video.title }}
								</div>
							</template>
							<template v-else>
								<div class="sec-tit ellipsis">暂无相关视频</div>
							</template>
						</el-collapse-item>
					</el-collapse>
				</div>
			</div>
		</cl-dialog>
	</div>
</template>
<script>
export default {
	name: "cl-course",
	data() {
		return {
			visible: false,
			activeNames: [],
			videoData: [],
			videoList: [],
			flag: [],
			videoSrc: "",
			currentId: ""
		};
	},
	methods: {
		open() {
			this.getVideotitle();
			this.visible = true;
		},
		changeTab(idx) {
			if (!this.flag[idx]) {
				let { id } = this.videoData[idx];
				this.getVideolist(id, idx);
			}
		},
		changeVideo({ id, resource_url }) {
			if (this.currentId == id) return;
			this.currentId = id;
			this.videoSrc = resource_url;
		},
		//获取tabs
		async getVideotitle() {
			const data = await this.$service.guidevideo.getVideotitle();
			if (data.length) {
				data.forEach(v => {
					this.videoList.push([]);
					this.flag.push(false);
				});
				this.videoData = data;
				this.getVideolist(data[0].id, 0);
			}
		},
		//获取视频
		async getVideolist(id, idx) {
			const data = await this.$service.guidevideo.getVideolist({ id });
			this.videoList[idx] = data;
			this.flag[idx] = true;
			this.$nextTick(() => {
				this.activeNames.push(idx);
			});
			if (idx == 0) {
				this.currentId = data[0].id;
				this.videoSrc = data[0].resource_url;
			}
		},
		close() {
			this.activeNames = [];
			this.videoData = [];
			this.videoList = [];
			this.flag = [];
			this.$refs.videoRef.pause();
			this.videoSrc = "";
			this.currentId = "";
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-dialog__body {
		height: 500px;
		box-sizing: border-box;
		.cl-dialog__container {
			height: 100%;
			overflow: hidden;
		}
	}
	.el-collapse-item__wrap {
		border-bottom: 0;
	}
	.el-collapse-item__header {
		border: 0;
		i {
			display: none;
		}
	}
	.el-collapse {
		border: 0;
	}
	.el-collapse-item__content {
		padding-bottom: 0;
	}
}
.d-flex {
	display: flex;
}
.video-list {
	width: 230px;
	overflow: auto;
	.title {
		width: 100%;
		height: 30px;
		align-items: center;
		background: #f2f2f2;
		.line {
			width: 4px;
			height: 100%;
			background: $primary;
		}
		span {
			font-size: 15px;
			color: #333;
			font-weight: 500;
		}
	}
	.sec-tit {
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #333;
		padding-left: 20px;
		cursor: pointer;
		&.active {
			color: $primary;
		}
	}
}
</style>
